<template>
  <el-descriptions :title="title"
                   :direction="direction"
                   :column="column"
                   border>

    <template v-for="(item, prop) in columns" >
      <el-descriptions-item :key="prop" :span="item.span"
      :label-class-name="item.labelClassName?item.labelClassName:labelWidth"
      :content-class-name="item.contentClassName"
                            :label="item.label">
        <template>
          <general v-if="item.hasOwnProperty('componentName')"
                   disabled
                   v-bind="inheritProps(item)"
                   :value="data[prop]"
                   :component-name="item.componentName"></general>
          <span v-else
                v-html="data[prop]"></span>
        </template>
      </el-descriptions-item>
    </template>
  </el-descriptions>
</template>

<script>
export default {
  components: {
    general: () => import('@/components/general/index')
  },
  data () {
    return {
    }
  },
  props: {
    labelWidth: {
      type: String,
      default: 'label-width'
    },
    title: String,
    direction: String,
    data: Object,
    column: {
      type: Number,
      default: 1
    },
    size: {
      type: String,
      default: 'medium'
    },
    columns: {
      type: Object,
      required: true
    }
  },
  created () {},
  methods: {
    // 继承转换属性
    inheritProps (template) {
      let cloneTemplate = {}
      Object.assign(cloneTemplate, template)

      let componentName = cloneTemplate.componentName

      switch (componentName.toKebabCase()) {
        case 'button-input':
          cloneTemplate.noText =
            Object.prototype.toString.call(cloneTemplate.noText) ==
            '[object Boolean]'
              ? cloneTemplate.noText
              : true
          delete cloneTemplate.visible
          break
      }

      delete cloneTemplate.componentName
      delete cloneTemplate.visible

      return cloneTemplate
    }
  }
}
</script>

<style>
.label-width {
    width:240px !important
}
</style>
